<template>
  <div class="MenuCard" v-show="show==true">
    <div class="flex" @click="ElMessage({message: '功能开发中...',type: 'warning', grouping: true})">
      <div class="flex-item1">
        <div class="flex-item-child">
          <icon-iphone theme="outline" size="30" :strokeWidth="2" />
          <p>传歌到设备</p>
        </div>
        <div class="flex-item-child">
          <icon-remind theme="outline" size="30" :strokeWidth="2" />
          <p>铃声制作</p>
        </div>
        <div class="flex-item-child">
          <icon-memory-card-one theme="outline" size="30" :strokeWidth="2" />
          <p>保存到网盘</p>
        </div>
        <div class="flex-item-child">
          <icon-alarm-clock theme="outline" size="30" :strokeWidth="2" />
          <p>定时设置</p>
        </div>
        <div class="flex-item-child">
          <icon-feelgood-one theme="outline" size="30" :strokeWidth="2" />
          <p>反馈与修复</p>
        </div>
        <div class="flex-item-child">
          <icon-gamepad theme="outline" size="30" :strokeWidth="2" />
          <p>游戏优化</p>
        </div>
        <div class="flex-item-child">
          <icon-microphone theme="outline" size="30" :strokeWidth="2" />
          <p>虚拟麦克风</p>
        </div>
        <div class="flex-item-child">
          <icon-headphone-sound theme="outline" size="30" :strokeWidth="2" />
          <p>音效设置</p>
        </div>
        <div class="flex-item-child">
          <icon-mail theme="outline" size="30" :strokeWidth="2" />
          <p>我的消息</p>
        </div>

      </div>
      <div class="split-line"></div>
      <div class="flex-item2">
        <p>添加歌曲</p>
        <p>黑名单设置</p>
      </div>
      <div class="split-line"></div>
      <div class="flex-item2">
        <p>设置</p>
        <p>帮助</p>
        <p>登录</p>
        <p>升级</p>
        <p>退出</p>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="closeMask" @click="closeMenu">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
const prop = defineProps({
  show: {
    type: Boolean,
    default: false,
  }
})
const emit = defineEmits(['closeMenu'])
// 关闭菜单
const closeMenu = () => {
  emit('closeMenu')
}
</script>

<style scoped lang="less">
.closeMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  // background: rgba(0, 0, 0, 0.5);
}

.MenuCard {
  width: 300px;
  // height: 500px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  position: absolute;
  top: 70px;
  right: 20px;

  .flex {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;

    // 分割线
    .split-line {
      width: 100%;
      height: 1px;
      background-color: #ccc;
    }

    .flex-item1 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      box-sizing: border-box;

      .flex-item-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        padding: 12px 4px;
        color: #303030;

        p {
          font-size: 14px;
          color: #666;
        }

        &:hover {
          cursor: pointer;
          background-color: #f5f5f5;
        }
      }
    }

    .flex-item2 {
      display: flex;
      flex-direction: column;

      p {
        font-size: 14px;
        padding: 12px;
        border-radius: 8px;
        color: #303030;

        &:hover {
          cursor: pointer;
          background-color: #f5f5f5;
        }
      }
    }
  }
}
</style>